<template>
  <div class="establishId">
    <div class="max">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label=" ">
          <a-input style="width:400px" type="password" v-model="form.name" placeholder="输入8-20个字符，必须包含字母和数字" v-if="showPassword" />
          <a-input style="width:400px" type="text" v-model="form.name" placeholder="输入8-20个字符，必须包含字母和数字" v-if="!showPassword" />
          <div class="right-option">
            <div class="option-content" @click="changePasswordShow">
              <img src="../../../assets/image/login/hidden.png" v-if="showPassword">
              <img src="../../../assets/image/login/show.png" v-else>
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item label=" ">
          <a-input style="width:400px" type="password" v-model="form.name" placeholder="重复新密码" v-if="showPassword1" />
          <a-input style="width:400px" type="text" v-model="form.name" placeholder="重复新密码" v-if="!showPassword1" />
          <div class="right-option">
            <div class="option-content" @click="changePasswordShow1">
              <img src="../../../assets/image/login/hidden.png" v-if="showPassword1">
              <img src="../../../assets/image/login/show.png" v-else>
            </div>
          </div>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <div class="clicks" @click="skip">下一步</div>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import '@/assets/css/form.less'
export default {
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 11 },
      showPassword: true,
      showPassword1: true,
      form: {
        name: '',
        type: true
      },
      rules: {

      },
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    skip() { //下一步跳转
      this.$router.push('/login/view/index');
    },

    changePasswordShow() {
      this.showPassword = !this.showPassword
    },
    changePasswordShow1() {
      this.showPassword1 = !this.showPassword1
    }
  },
}
</script>
<style lang="less" scoped>
.establishId {
  width: 100%;
  margin: 0 auto;
  .max {
    margin-top: 40px;
    .ant-form-item {
      padding-left: 240px;
      position: relative;
      margin-bottom: 22px;
      label {
        font-size: 12px;
        color: @colorGreyFont;
      }
      .hint {
        color: #ff9900;
        font-size: 12px;
        position: absolute;
        top: 14px;
      }
      .checkeds {
        margin-left: 200px;
      }
      .clicks {
        width: 400px;
        height: 40px;
        opacity: 1;
        background: @activeRed;
        border-radius: 2px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        margin-left: 44px;
        margin: 0 0 30px 39px;
        cursor: pointer;
      }
      .right-icon {
        cursor: pointer;
        img {
          width: 15px;
          height: 15px;
        }
      }
    }
  }
}
.right-option {
  width: 40px;
  position: absolute;
  z-index: 10;
  right: 0;
  top: -12px;
  height: 40px;
  .option-content {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #3b82ff;
    line-height: 40px;
    text-align: center;
    img {
      cursor: pointer;
      width: 16px;
      height: 16px;
    }
  }

  .count-down {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    padding-right: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: @colorGreyFont;
    opacity: 0.3;
    line-height: 40px;
  }
}
/deep/ .ant-input-affix-wrapper {
  line-height: 40px;
}

/deep/ .ant-input {
  height: 41px;
}
.ant-form-item-control {
  position: relative;
}
/deep/ .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
  border-color: @greyBorder;
}
</style>